{extend name="common/common" /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		行业类别
		{if authCheck('icdata/cateadd')}
		<el-button class="header-btn" type="primary" size="small"
			icon="el-icon-plus" plain @click="addRow"> 添加行业</el-button>
		{/if}
	</div>
	<el-table :data="table.tableData" stripe="true">
		<el-table-column align="center" prop="id" label="序号" width="80" sortable></el-table-column>
		<el-table-column align="center" prop="cate_name" label="所属类别"></el-table-column>
		<el-table-column align="center" prop="name" label="行业名称"></el-table-column>
		<el-table-column align="center" label="操作">
			<template slot-scope="scope">
				{if authCheck('icdata/cateedit')}
				<el-tooltip content="编辑" open-delay="500" hide-after="1500" placement="left">
				<el-button size="mini" plain type="success" icon="el-icon-edit-outline" circle
					@click="eidtRow(scope.row)">
				</el-button>
				</el-tooltip>
				{/if}
				{if authCheck('icdata/catedel')}
				<el-tooltip content="删除" open-delay="500" hide-after="1500" placement="right">
				<el-button size="mini" plain type="danger" icon="el-icon-delete" circle
					@click="delRow(scope.row)">
				</el-button>
				</el-tooltip>
				{/if}
			</template>
		</el-table-column>
	</el-table>
	<div class="table-page">
		<el-pagination
			@size-change="pageSizeChange"
			@current-change="curPageChange"
			:current-page="table.pageNumber"
			:page-sizes="[10, 20, 50, 75]"
			:page-size="table.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="table.tableTotal">
		</el-pagination>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		table:{
			tableData:"",
			tableTotal:0,
			pageSize:10,
			pageNumber:1,
		}
	},
	mounted:function() {
		this.getTable();
	},
	methods:{
		getTable() {
			this.loading=true;
			var param = {
				pageSize:this.table.pageSize,
				pageNumber:this.table.pageNumber,
			};
			$.post('{:url("Icdata/cate")}',param,function(res) {
				main.loading=false;
				if(res.code == 1){
					main.$message({message:res.msg,type:'success'});
					main.table.tableData = res.data.rows;
					main.table.tableTotal = res.data.total;
				}else{
					main.$notify.error({title:'失败',message:res.msg});
				}
			});
		},
		pageSizeChange(val) {
			this.table.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.table.pageNumber = val;
			this.getTable();
		},
		addRow() {
			FormBox.subType = "add";
			FormBox.form = {
				name:"",cate:""
			};
			FormBox.FormTitle = "添加行业";
			FormBox.is_show = true;
		},
		eidtRow(row) {
			FormBox.subType = row.id;
			FormBox.form = {
				name:row.name,cate:row.cate
			};
			FormBox.FormTitle = "编辑 “" + row.name + "” 行业";
			FormBox.is_show = true;
		},
		delRow(row) {
			this.$confirm('此操作将永久删除该行业, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var param = {
					id:row.id
				};
				$.post('{:url("Icdata/cateDel")}',param,function(res) {
					if(res.code == 1){
						main.$notify({title:"成功",type:"success",message:res.msg});
						main.getTable();
					}else{
						main.$notify.error({title:"错误",message:res.msg});
					}
				});
			}).catch(() => {
				this.$notify({title:"消息",type:'info',message:'已取消删除'});
			});
		}
	}
})
</script>
{/block}

{block name="component"}
<div id="FormBox">
	<el-dialog :title="FormTitle" :visible.sync="is_show" top="5vh">
		<div class="FormBox">
			<el-form
				label-width="100px" :model="form" inline
				:rules="rules" ref="form" class="curForm">
				<el-form-item label="行业类别" prop="cate">
					<el-select v-model="form.cate" placeholder="请选择">
						<el-option label="实业型" :value="1"></el-option>
						<el-option label="服务型" :value="2"></el-option>
					</el-select>
				</el-form-item><br>
				<el-form-item label="行业名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入行业名称" clearable></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="is_show = false">取消</el-button>
			<el-button type="success" @click="subForm">保存</el-button>
		</div>
	</el-dialog>
</div>
<script type="text/javascript">
var FormBox = new Vue({
	el:"#FormBox",
	data:{
		subType:"add",
		FormTitle:"添加行业",
		is_show:false,
		form:{
			name:"",cate:""
		},
		rules:{
			name:[{required:true,message:'请输入行业名称',trigger:['blur','change']}],
			cate:[{required:true,message:'请选择行业类别',trigger:['blur','change']}],
		}
	},
	methods:{
		subForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if(this.subType == "add"){
						var url = "{:url('Icdata/cateAdd')}";
						var param = this.form;
					}else{
						var url = "{:url('Icdata/cateEdit')}";
						var param = {
							name:this.form.name,
							cate:this.form.cate,
							id:this.subType,
						}
					}
					$.post(url,param,function(res) {
						if(res.code == 1){
							FormBox.is_show = false;
							main.$notify({title:"成功",type:"success",message:res.msg});
							main.getTable();
						}else{
							main.$notify.error({title:"错误",message:res,msg});
						}
					})
				}
			});
		}
	}
})
</script>
{/block}
